<template>
    <div class="balance-statistic">
      <div class="balance-statistic-item income">
        <div class="balance-statistic-label">{{ incomeTitle }}</div>
        <div class="balance-statistic-value">{{ formatNumber(income) }}</div>
      </div>
      <div class="balance-statistic-item disburse">
        <div class="balance-statistic-label">{{ disburseTitle }}</div>
        <div class="balance-statistic-value">{{ formatNumber(disburse) }}</div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      income: {
        required: true,
        default: 0
      },
      disburse: {
        required: true,
        default: 0
      },
      incomeTitle: {
        type: String,
        required: true,
      },
      disburseTitle: {
        type: String,
        required: true,
      },
    },
    methods: {
      formatNumber(value) {
        return value.toLocaleString('en-US', {
          minimumFractionDigits: 2,
        });
      },
    },
  };
  </script>
  
  <style scoped>
  .balance-statistic {
    display: flex;
    width: 500px; /* 调整为所需的宽度 */
  }
  
  .balance-statistic-item {
    margin-right: 80px; /* 调整为所需的左侧间距 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .balance-statistic-label {
    font-weight: bold;
  }
  
  .balance-statistic-value {
    font-size: 24px;
  }
  
  .income {
    color: blue;
  }
  
  .disburse {
    color: red;
  }
  </style>